<template>
  <div class="childComponents">
    <Card :dis-hover='true'>
      <p slot="title">{{ $t('common.add') }}</p>
      <Form ref="addForm" :model="addData" :rules="addFormVerify" :label-width="120" class="formBox">
        <FormItem :label="$t('myTestTab.name')" prop="name">
            <Input v-model="addData.name" :placeholder="$t('common.enter')"></Input>
        </FormItem>
        <FormItem :label="$t('myTestTab.loginName')" prop="">
          <Input v-model="addData.loginName" :placeholder="$t('common.enter')"></Input>
        </FormItem>
        <FormItem :label="$t('myTestTab.email')" prop="email">
            <Input v-model="addData.email" :placeholder="$t('common.enter')"></Input>
        </FormItem>
        <FormItem :label="$t('myTestTab.mobilePhone')" prop="mobilePhone">
          <Input type="text" v-model="addData.mobilePhone" :placeholder="$t('common.enter')"></Input>
        </FormItem>
        <FormItem :label="$t('myTestTab.address')" prop="address">
          <Input type="text" v-model="addData.address" :placeholder="$t('common.enter')"></Input>
        </FormItem>
        <FormItem :label="$t('myTestTab.remark')" prop="remark">
          <Input v-model="addData.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :placeholder="$t('common.enter')"/>
        </FormItem>
        <FormItem>
            <Button shape="circle" @click="goback('addForm')">{{ $t('common.return') }}</Button>
          <Button shape="circle" class="return" type="primary" @click="handleSubmit('addForm')" :loading="btnLoading">{{ $t('common.confirm') }}</Button>
        </FormItem>
    </Form>
    </Card>
  </div>
</template>
<script>
import { getPost, fromJson } from '@/libs/ajax.js'
import * as Verify from '@/libs/verity'

export default {
  name: 'add',
  props: ['then', 'then-ok'],
  data () {
    return {
      btnLoading: false,
      addData: {
        loginName: '',
        name: '',
        mail: '',
        mobilePhone: '',
        address: '',
        remark: ''
      },
      addFormVerify: {
        loginName: [{ required: true, validator: Verify.stringLength() }],
        name: [{ required: true, validator: Verify.fill() }],
        email: [{ required: true, validator: Verify.email() }],
        mobilePhone: [{ required: true, validator: Verify.mobilePhone() }],
        address: [{ required: true, validator: Verify.fill() }],
        remark: [{ required: true, validator: Verify.fill() }]
      }
    }
  },
  methods: {
    goback (name) {
      this.$refs[name].resetFields()
      this.then('add')
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          let postData = []
          postData = fromJson(this.addData)
          // console.log(postData)
          getPost('/aut/myTestTab/add', postData, (data, all) => {
            if (all.code === 'E0') {
              this.btnLoading = false
              this.thenOk(data, all)
              this.then('add')
              this.$refs[name].resetFields()
            }
          })
        }
      })
    }
  }
}
</script>
